<template>
  <el-descriptions
      class="margin-top"
      title="个人信息"
      :column="3"
      border
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <user/>
          </el-icon>
        </div>
      </template>
      <span v-if="updateName" @click="clk">{{ userInfo1.name }}</span>
      <el-input v-else v-model="userInfo1.name" @keyup.enter.native="setN" @blur="updateName=true"></el-input>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <iphone/>
          </el-icon>
          账号
        </div>
      </template>
      {{ userInfo1.account }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <location/>
          </el-icon>
          邮箱
        </div>
      </template>
      {{ userInfo1.email }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <office-building/>
          </el-icon>
          头像
        </div>
      </template>

      <el-avatar v-if="!isShow" shape="square" size="large" :src="url+userInfo1.avatar"/>

      <el-upload
          v-else
          class="avatar-uploader"
          :show-file-list="false"
          :on-change="uploadFile"
          :auto-upload="false"
          ref="uploadRef"
      >
        <el-avatar title="点击上传头像" v-if="userInfo1.avatar" shape="square" size="large" :src="url+userInfo1.avatar"/>
        <el-icon v-else class="avatar-uploader-icon">
          <Plus/>
        </el-icon>
      </el-upload>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <office-building/>
          </el-icon>
          角色
        </div>
      </template>
      <el-tag v-for="item in userInfo1.rolas" :key="item.roleId" size="large" style="margin: auto 4px">
        {{ item.roleName }}
      </el-tag>
    </el-descriptions-item>
  </el-descriptions>
  <div v-if="isShow">
    <div class="hander">
      <span>设置</span>
    </div>
    <div style="display: flex; flex-direction:column;">
      <div class="agree">
        <span style="margin-right: 50px">是否自动同意好友添加</span>
        <el-switch v-model="set.autoAgree" @change="open('autoAgree')" size="large"/>
      </div>

      <div class="agree">
        <span style="margin-right: 50px">自动同意群聊邀请</span>
        <el-switch v-model="set.autoGroupAgree" @change="open('autoGroupAgree')" size="large"/>
      </div>

      <div class="agree">
        <span style="margin-right: 50px">自动拒绝群聊邀请</span>
        <el-switch v-model="set.refuseGroupAgree" @change="open('refuseGroupAgree')" size="large"/>
      </div>

      <div class="agree">
        <span style="margin-right: 50px">是否关闭好友添加</span>
        <el-switch v-model="set.refuseAgree" @change="open('refuseAgree')" size="large"/>
      </div>

      <div class="agree">
        <span style="margin-right: 50px">关闭说说显示</span>
        <el-switch v-model="set.intoShow" @change="open('intoShow')" size="large"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";
import {Ref, ref, watchEffect} from "vue";
import {getPromise, getUserAccount, setAvatar, setName, setPromise} from "../../service/AccountApi";
import {error, success} from "../../utils/messageUtil";
import {UploadFile, UploadInstance} from "element-plus";
import {FileType, userInfo} from "../../utils/constant";
import {upload} from "../../service/FileApi";

const open = (promiseType:string)=>{
  setPromise({
    promiseType
  }).then(d=>{
    if(d.data.code === '200'){
      success("成功")
    }
  })
}

const set = ref({
  autoAgree:false,
  autoGroupAgree:false,
  refuseGroupAgree:false,
  refuseAgree:false,
  intoShow:false
})

const router = useRouter();

const url = ref(import.meta.env.VITE_APP_BASE_API + "/common/file/loadFileId?fileId=")

const uploadRef = ref<UploadInstance>()

const updateName = ref(true)

const isShow = ref(false)

const fileRo: any = {
  multipartFiles: [],
  fileType: FileType.USER_AVATAR
}

const uploadFile = (uploadFile: UploadFile) => {
  if (uploadFile.raw?.type == "image/jpeg" || uploadFile.raw?.type == "image/png") {
    if (uploadFile.raw.size / 1024 / 1024 > 2) {
      error('头像文件不能大于 2MB!')
      return false
    }
    fileRo.multipartFiles.push(uploadFile.raw);
    upload(fileRo).then(d => {
      if (d.data.code != '200') {
        error(d.data.message)
      } else {
        setAvatar({
          fileId: d.data.date.fileIds[0]
        }).then(d => {
          if (d.data.code == 200) {
            success("头像设置成功")
            getUserAccount({
              userId: router.currentRoute.value.query.userId
            }).then(d => {
              if (d.data.code == 200) {
                userInfo1.value = d.data.date
              } else {
                error(d.data.message)
              }
            }).catch(() => {
              error("网络异常")
            })
          } else {
            error(d.data.message)
          }
        }).catch(e => {
          error("网络异常")
        })
      }
    }).catch(e => {
      error("网络异常")
    })
  } else {
    error("文件类型错误 只可以上传jpg和png图片")
  }
}

const userInfo1: Ref<{
  id: string,
  name: string,
  account: string,
  email: string,
  avatar: string,
  rolas: any[]
}> = ref({
  id: "",
  name: "",
  account: "",
  email: "",
  avatar: "",
  rolas: []
})

const clk = ()=>{
  if(isShow){
    updateName.value = false
  }
}

const setN = () => {
  setName({
    nowName:userInfo1.value.name
  }).then(d=>{
    if(d.data.code === '200'){
      success('修改成功')
    }
  })
  updateName.value = true
}

const getData = ()=>{
  let query = router.currentRoute.value.query
  getUserAccount({
    userId: query.userId
  }).then(d => {
    if (d.data.code == 200) {
      userInfo1.value = d.data.date
    } else {
      error(d.data.message)
    }
  }).catch(() => {
    error("网络异常")
  })

  getPromise().then((d)=>{
    if(d.data.code == 200){
      set.value=d.data.date;
    }
  }).catch(() => {
    error("网络异常")
  })

  isShow.value = query.userId === userInfo().id
}

watchEffect(() => {
  if(router.currentRoute.value.name == 'info') {
    getData()
  }
})


</script>

<style scoped>

.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
}

.hander {
  margin: 16px 0;
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: 700;
}

.agree {

}
</style>